<template>
  <div class="good-list">

    <!-- 第一种跳转方式 -->
    <!-- <router-link class="good-item" v-for="item in goodlist" :key="item.id" :to="'/home/goodinfo/'+item.id" tag="div">
      <img v-lazy="item.img_url">
      <h1>{{ item.title }}</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥{{ item.sell_price }}</span>
          <span class="old">￥{{ item.market_price }}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩余 {{ item.stock_quantity }} 件</span>
        </p>
      </div>
    </router-link> -->
    

    <!-- 编程式跳转 -->
    <div class="good-item" v-for="item in goodlist" :key="item.id" @click="goDetail(item.id)">
      <img v-lazy="item.img_url">
      <h1>{{ item.title }}</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥{{ item.sell_price }}</span>
          <span class="old">￥{{ item.market_price }}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩余 {{ item.stock_quantity }} 件</span>
        </p>
      </div>
    </div>
    



  <mt-button type="danger" size="large" @click="addlist()">加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        pageindex: 1,
        goodlist: []
      }
    },
    created(){
      this.Getlist(); 
    },
    methods: {
      Getlist() {
        this.$http.get('api/getgoods?pageindex=' + this.pageindex).then(result => {
          if (result.body.status === 0) {
            Toast('获取数据成功')
            this.goodlist=this.goodlist.concat(result.body.message)
          }else{
            Toast('获取数据失败')
          }
        })
      },
      addlist(){
        this.pageindex++;
        this.Getlist()
      },
      goDetail(id){
        // 最简单  字符串
        this.$router.push('/home/goodinfo/'+id)
        // 对象
        // this.$router.push({ path: '/home/goodinfo/'+id })
        // 命名的路由
        // this.$router.push({ name: 'goodinfo', params: { id }})
      }
    }

  }
</script>


<style lang="scss" scoped>
  img[lazy=loading] {
    width: 40px;
    height: 40px;
    margin: auto;
  }

  .good-list {
    display: flex;
    flex-wrap: wrap;
    padding: 7px;
    justify-content: space-between;

    .good-item {
      width: 49%;
      border: 1px solid #ccc;
      box-shadow: 0px 0px 8px #ccc;
      margin-bottom: 7px;
      border-radius: 4px;
      overflow: hidden;
      flex-direction: column;
      justify-content: space-between;
      display: flex;

      h1 {
        font-size: 14px;
        padding: 4px;
      }

      img {
        width: 100%;
      background: #ccc;

      }

      .info {
        background: #eee;
        padding: 4px
      }

      .now {
        color: red;
        font-size: 18px;
        font-weight: bold;
      }

      .old {
        text-decoration: line-through;
      }

      p {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between
      }
    }
  }
</style>